<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8>
<meta name="viewport" content="width=620">
<title>HTML5 Demo: Drag and drop, automatic upload</title>
<link rel="stylesheet" href="css/html5demos.css">
<script src="js/h5utils.js"></script>
</head>
<body>
<section id="wrapper">
<div id="carbonads-container">
<div class="carbonad">
<div id="azcarbon"></div>
<script type="text/javascript">
var z = document.createElement("script"); 
z.type = "text/javascript"; 
z.async = true; 
z.src = "http://engine.carbonads.com/z/14060/azcarbon_2_1_0_VERT"; 
var s = document.getElementsByTagName("script")[0]; 
s.parentNode.insertBefore(z, s);
</script>
</div>
</div>    
<header>      
<h1>Drag and drop, automatic upload</h1>    
</header>
<style>
#holder { border: 10px dashed #ccc; 
width: 300px; 
min-height: 300px; 
margin: 20px auto;
}
#holder.hover { border: 10px dashed #0c0; 
}
#holder img { display: block; 
margin: 10px auto; 
}
#holder p { margin: 10px; 
font-size: 14px; 
}
progress { width: 100%; 
}
progress:after { content: '%'; 
}
.fail { background: #c00; 
padding: 2px; 
color: #fff; 
}
.hidden { display: none !important;
}
</style>
<article>  
<div id="holder">  </div>   
<p id="upload" class="hidden">
<label>Drag & drop not supported, but you can still upload via this input field:
<br>
<input type="file">
</label>
</p>  
<p id="filereader">File API & FileReader API not supported
</p>  
<p id="formdata">XHR2's FormData is not supported</p>  
<p id="progress">XHR2's upload progress isn't supported</p> 
<p>Upload progress: 
<progress id="uploadprogress" min="0" max="100" value="0">0
</progress>
</p>  
<p>Drag an image from your desktop on to the drop zone above to see the browser both render the preview, but also upload automatically to this server.
</p>
</article>
<script>
var holder = document.getElementById('holder'),    
tests = {      filereader: typeof FileReader != 'undefined',
dnd: 'draggable' in document.createElement('span'),
formdata: !!window.FormData,
progress: "upload" in new XMLHttpRequest   
},
     support = { 
     filereader: document.getElementById('filereader'),
     formdata: document.getElementById('formdata'),
     progress: document.getElementById('progress')
     },    
     acceptedTypes = {
     'image/png': true,
     'image/jpeg': true,
     'image/gif': true
     },
     progress = document.getElementById('uploadprogress'),
     fileupload = document.getElementById('upload');
     "filereader formdata progress".split(' ').forEach(function (api) {
     if (tests[api] === false) {
     support[api].className = 'fail';
     } 
     else {
     // FFS. I could have done el.hidden = true, but IE doesn't support   
     // hidden, so I tried to create a polyfill that would extend the    
     // Element.prototype, but then IE10 doesn't even give me access    
     // to the Element object. Brilliant.    support[api].className = 'hidden';  
     }
});
function previewfile(file) {
if (tests.filereader === true && acceptedTypes[file.type] === true) {
var reader = new FileReader();
reader.onload = function (event) {
var image = new Image();
image.src = event.target.result;
image.width = 250; 
// a fake resize holder.appendChild(image);    
};
reader.readAsDataURL(file);
}
else {
holder.innerHTML += '<p>Uploaded ' + file.name + ' ' + (file.size ? (file.size/1024|0) + 'K' : '');
console.log(file);
}}
function readfiles(files) {
debugger;
var formData = tests.formdata ? new FormData() : null;
for (var i = 0; i < files.length; i++) {
if (tests.formdata) formData.append('file', files[i]);
previewfile(files[i]);    
}    
// now post a new XHR request    
if (tests.formdata) { 
var xhr = new XMLHttpRequest();
xhr.open('POST', '/devnull.php');
xhr.onload = function() {
progress.value = progress.innerHTML = 100;
};
if (tests.progress) {
xhr.upload.onprogress = function (event) {
if (event.lengthComputable) {            
var complete = (event.loaded / event.total * 100 | 0);
progress.value = progress.innerHTML = complete;
}
}
}
xhr.send(formData);
}}
if (tests.dnd) {
   holder.ondragover = function () {
   this.className = 'hover'; return false;
   };
   holder.ondragend = function () { 
this.className = ''; return false;
};
holder.ondrop = function (e) {
this.className = '';
e.preventDefault();
readfiles(e.dataTransfer.files);
  }}
  else {
  fileupload.className = 'hidden';
  fileupload.querySelector('input').onchange = function () {
  readfiles(this.files);
  };
  }
  </script>
  <a id="html5badge" href="http://www.w3.org/html/logo/">
  <img src="http://www.w3.org/html/logo/badge/html5-badge-h-connectivity-device-graphics-multimedia-performance-semantics-storage.png" width="325" height="64" alt="HTML5 Powered with Connectivity / Realtime, Device Access, Graphics, 3D & Effects, Multimedia, Performance & Integration, Semantics, and Offline & Storage" title="HTML5 Powered with Connectivity / Realtime, Device Access, Graphics, 3D & Effects, Multimedia, Performance & Integration, Semantics, and Offline & Storage">
  </a>    
  <footer>
  <a href="/">HTML5 demos</a>
<a id="built" href="http://twitter.com/rem">@rem built this</a>
<a href="#view-source">view source</a>
</footer> 
</section>
<a href="http://github.com/remy/html5demos">
<img style="position: absolute; top: 0; left: 0; border: 0;" src="http://s3.amazonaws.com/github/ribbons/forkme_left_darkblue_121621.png" alt="Fork me on GitHub" />
</a><
script src="js/prettify.packed.js"></script>
<script>var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script>
try {var pageTracker = _gat._getTracker("UA-1656750-18");pageTracker._trackPageview();
} 
catch(err) {}
</script>
</body>
</html>